﻿<Page
    x:Class="Ganjine_Windows10.SectionPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Ganjine_Windows10"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    FlowDirection="RightToLeft" Loaded="Page_Loaded"
    GotFocus="pageRoot_GotFocus" LostFocus="pageRoot_LostFocus" SizeChanged="Page_SizeChanged">
    <Page.Transitions>
        <TransitionCollection>
            <NavigationThemeTransition>
                <NavigationThemeTransition.DefaultNavigationTransitionInfo>
                    <DrillInNavigationTransitionInfo />
                </NavigationThemeTransition.DefaultNavigationTransitionInfo>
            </NavigationThemeTransition>
        </TransitionCollection>
    </Page.Transitions>

    <Page.Resources>


        <DataTemplate x:Key="SectionListDataTemplate">
            <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="-20,-5,-20,-5"> <!-- Dirty hack to remove mouse hover of ListView -->
                <Grid Height="90" Margin="30,15,30,15" HorizontalAlignment="Stretch" Background="{StaticResource SectionBoxColorLight}">
                    <TextBlock Margin="30,5,30,10" VerticalAlignment="Center" HorizontalAlignment="Stretch" TextAlignment="Left" Text="{Binding Text}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" FontSize="26"/>
                </Grid>
                <Polygon Points="0,0 15,15 15,0" Fill="{ThemeResource ApplicationPageBackgroundThemeBrush}" HorizontalAlignment="Right" Margin="0,14,29,0" />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="PoemListDataTemplate">
            <Grid  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="-20,-5,-20,-10"> <!-- Dirty hack to remove mouse hover of ListView -->
                <Grid Height="110" Margin="20,5,10,5" HorizontalAlignment="Stretch" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="20,5,30,5">
                        <TextBlock Margin="0,0,0,10" VerticalAlignment="Center" HorizontalAlignment="Stretch" TextAlignment="Left" Text="{Binding Text}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" FontSize="26"/>
                        <TextBlock Margin="10,0,0,5" VerticalAlignment="Center" HorizontalAlignment="Stretch" TextAlignment="Left" Text="{Binding s1}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" FontSize="14" Opacity="0.8" FontWeight="Thin" FontFamily="Segoe UI Light"/>
                        <TextBlock Margin="50,0,0,5" VerticalAlignment="Center" HorizontalAlignment="Stretch" TextAlignment="Left" Text="{Binding s2}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" FontSize="14" Opacity="0.8" FontWeight="Thin" FontFamily="Segoe UI Light"/>
                    </StackPanel>
                </Grid>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="TextListDataTemplate">
            <Grid  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="-20,-5,-20,-10">
                <!-- Dirty hack to remove mouse hover of ListView -->
                <Grid Height="90" Margin="20,5,10,5" HorizontalAlignment="Stretch" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="20,5,30,5">
                        <TextBlock Margin="0,0,0,10" VerticalAlignment="Center" HorizontalAlignment="Stretch" TextAlignment="Left" Text="{Binding Text}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" FontSize="26"/>
                        <TextBlock Margin="5,0,0,5" VerticalAlignment="Center" HorizontalAlignment="Stretch" TextAlignment="Left" Text="{Binding s1}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" FontSize="14" Opacity="0.8" FontWeight="Thin" FontFamily="Segoe UI Light"/>
                    </StackPanel>
                </Grid>
            </Grid>
        </DataTemplate>


        <DataTemplate x:Key="SectionGridDataTemplate">
            <Grid>
                <Grid Height="120" Margin="10" Width="380" Background="{StaticResource SectionBoxColorDark}">
                    <TextBlock Margin="10,10,30,10" VerticalAlignment="Center" HorizontalAlignment="Stretch" TextAlignment="Center" Text="{Binding Text}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" FontSize="26"/>
                </Grid>
                <Polygon Points="0,0 15,15 15,0" Fill="{ThemeResource ApplicationPageBackgroundThemeBrush}" HorizontalAlignment="Right" Margin="9" />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="PoemGridDataTemplate">
            <Grid>
                <Grid Height="120" Margin="10" Width="400" Background="{StaticResource SectionBoxColorLight}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="10,5,30,5">
                        <TextBlock Margin="0,0,0,10" VerticalAlignment="Center" HorizontalAlignment="Stretch" TextAlignment="Center"  Text="{Binding Text}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" FontSize="26"/>
                        <TextBlock Margin="0,0,40,5" VerticalAlignment="Center" HorizontalAlignment="Stretch" TextAlignment="Center"  Text="{Binding s1}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" FontSize="16" FontWeight="Thin" FontFamily="Segoe UI Light"/>
                        <TextBlock Margin="40,0,0,5" VerticalAlignment="Center" HorizontalAlignment="Stretch" TextAlignment="Center"  Text="{Binding s2}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" FontSize="16" FontWeight="Thin" FontFamily="Segoe UI Light"/>
                    </StackPanel>
                </Grid>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="TextGridDataTemplate">
            <Grid>
                <Grid Height="120" Margin="10" Width="400" Background="{StaticResource SectionBoxColorLight}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="10,5,10,5">
                        <TextBlock Margin="0,0,20,10" VerticalAlignment="Center" HorizontalAlignment="Stretch" TextAlignment="Center"  Text="{Binding Text}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" FontSize="26"/>
                        <TextBlock Margin="5,10,5,0" VerticalAlignment="Center" HorizontalAlignment="Stretch" TextAlignment="Center"  Text="{Binding s1}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" FontSize="16" FontWeight="Thin" FontFamily="Segoe UI Light"/>
                    </StackPanel>
                </Grid>
            </Grid>
        </DataTemplate>
        
        <local:SectionPageTemplateSelector PoemTemplate="{StaticResource PoemGridDataTemplate}"
                                           TextTemplate="{StaticResource TextGridDataTemplate}"
                                           SectionTemplate="{StaticResource SectionGridDataTemplate}"
                                           x:Key="GridViewDataTemplate" />

        <local:SectionPageTemplateSelector PoemTemplate="{StaticResource PoemListDataTemplate}"
                                           TextTemplate="{StaticResource TextListDataTemplate}"
                                           SectionTemplate="{StaticResource SectionListDataTemplate}"
                                           x:Key="ListViewDataTemplate" />
    </Page.Resources>

    <Page.BottomAppBar>
        <CommandBar x:Name="PhoneCommandBar">
            <AppBarButton Label="تصادفی" Click="RandomPoem_Click" x:Name="RandomAppBarButton" Visibility="Collapsed">
                <AppBarButton.Icon>
                    <FontIcon Glyph="&#xE8AF;"/>
                </AppBarButton.Icon>
            </AppBarButton>
            <AppBarButton Label="پرش به" x:Name="JumpAppBarButton" Visibility="Collapsed" Click="JumpAppBarButton_Click">
                <AppBarButton.Icon>
                    <FontIcon Glyph="&#xE13F;"/>
                </AppBarButton.Icon>
                <AppBarButton.Flyout>
                    <Flyout>
                        <StackPanel FlowDirection="RightToLeft">
                            <TextBlock Text="پرش به شماره‌ی:" Margin="0,0,0,5"></TextBlock>
                            <TextBox Width="200" x:Name="JumpNumberTextBox" InputScope="NumericPin" TextChanged="JumpNumberTextBox_TextChanged"></TextBox>
                            <StackPanel FlowDirection="RightToLeft" Orientation="Horizontal" HorizontalAlignment="Right">
                                <TextBlock Text="( از" Margin="0,0,5,5"></TextBlock>
                                <TextBlock Text="1" Margin="0,0,5,5"></TextBlock>
                                <TextBlock Text="تا" Margin="0,0,5,5"></TextBlock>
                                <TextBlock Text="1" Margin="0,0,5,5" x:Name="JumpMaxNum"></TextBlock>
                                <TextBlock Text=")" Margin="0,0,0,5"></TextBlock>
                            </StackPanel>
                            <Button Content="پرش" x:Name="JumpButton"  IsEnabled="False" Opacity="0.8" Tapped="JumpButton_Click" Padding="20,8,20,8"></Button>
                        </StackPanel>
                    </Flyout>
                </AppBarButton.Flyout>
            </AppBarButton>
            <AppBarToggleButton Label="پین">
                <AppBarToggleButton.Icon>
                    <FontIcon Glyph="&#xE840;"/>
                </AppBarToggleButton.Icon>
            </AppBarToggleButton>
            <AppBarButton Label="حذف" Visibility="Collapsed">
                <AppBarButton.Icon>
                    <FontIcon Glyph="&#xE77A;"/>
                </AppBarButton.Icon>
            </AppBarButton>
        </CommandBar>
    </Page.BottomAppBar>


    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="wideView">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="700" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="PhoneItemView.Visibility" Value="Collapsed"/>
                        <Setter Target="TabletItemView.Visibility" Value="Visible"/>

                        <Setter Target="PoetImage.Visibility" Value="Visible"/>

                        <Setter Target="SearchToggle.Visibility" Value="Collapsed"/>
                        <Setter Target="SearchBar.HorizontalAlignment" Value="Right"/>
                        <Setter Target="SearchBar.Width" Value="350"/>
                        <Setter Target="SearchBar.Visibility" Value="Visible"/>
                        <Setter Target="HeaderRowDefinition.Height" Value="70"/>
                        <Setter Target="HeaderRelPanel1.Margin" Value="10,15,0,0"/>
                        <Setter Target="SearchBar.Margin" Value="60,10,0,10"/>
                        <Setter Target="headerText.Visibility" Value="Visible"/>
                        <Setter Target="headerText.Margin" Value="0,0,0,0"/>
                        <Setter Target="SearchToggle.Margin" Value="0,0,0,0"/>
                        <Setter Target="PoetImage.Margin" Value="5,0,10,0"/>
                        <Setter Target="SearchBackToggle.Visibility" Value="Collapsed"/>

                        <Setter Target="BackToggle.Visibility" Value="Visible"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="narrowView">
                    <VisualState.Setters>
                        <Setter Target="PhoneItemView.Visibility" Value="Visible"/>
                        <Setter Target="TabletItemView.Visibility" Value="Collapsed"/>

                        <Setter Target="PoetImage.Visibility" Value="Collapsed"/>

                        <Setter Target="SearchToggle.Visibility" Value="Visible"/>
                        <Setter Target="SearchBar.HorizontalAlignment" Value="Stretch"/>
                        <Setter Target="SearchBar.Width" Value="Auto"/>
                        <Setter Target="SearchBar.Visibility" Value="Collapsed"/>
                        <Setter Target="HeaderRowDefinition.Height" Value="50"/>
                        <Setter Target="HeaderRelPanel1.Margin" Value="0,5,0,0"/>
                        <Setter Target="SearchBar.Margin" Value="60,0,0,0"/>
                        <Setter Target="headerText.Visibility" Value="Visible"/>
                        <Setter Target="headerText.Margin" Value="30,0,0,0"/>
                        <Setter Target="SearchToggle.Margin" Value="0,0,-30,0"/>
                        <Setter Target="PoetImage.Margin" Value="0,0,0,0"/>
                        <Setter Target="SearchBackToggle.Visibility" Value="Collapsed"/>

                        <Setter Target="BackToggle.Visibility" Value="Collapsed"/>
                    </VisualState.Setters>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>


        <Grid.RowDefinitions>
            <RowDefinition Height="70" x:Name="HeaderRowDefinition" />
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0" Background="{StaticResource HeaderColor}" x:Name="Header">
            <RelativePanel Margin="10,15,0,0" x:Name="HeaderRelPanel1" >
                <Button x:Name="BackToggle" Visibility="Visible" 
                      Background="Transparent" Click="BackToggle_Click">
                    <FontIcon  
                              FontFamily="Segoe MDL2 Assets"  
                         Foreground="{ThemeResource AppBarItemForegroundThemeBrush}"  
                         Glyph="&#xE0AD;" FontSize="30" />
                </Button>
                <Button x:Name="SearchToggle" 
                      Background="Transparent" Click="SearchToggle_Click" RelativePanel.RightOf="BackToggle">
                    <FontIcon x:Name="SearchToggleIcon"  
                              FontFamily="Segoe MDL2 Assets"  
                         Foreground="{ThemeResource AppBarItemForegroundThemeBrush}"  
                         Glyph="&#xE094;" FontSize="30" />
                </Button>
                <Button x:Name="SearchBackToggle" Visibility="Collapsed" 
                      Background="Transparent" Click="SearchBackToggle_Click">
                    <FontIcon x:Name="BackToggleIcon"  
                              FontFamily="Segoe MDL2 Assets"  
                         Foreground="{ThemeResource AppBarItemForegroundThemeBrush}"  
                         Glyph="&#xE0AD;" FontSize="30" />
                </Button>
                <Ellipse x:Name="PoetImage" Width="42" Height="42" VerticalAlignment="Center" HorizontalAlignment="Left" RelativePanel.RightOf="SearchToggle">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="{Binding PoetImagePath}" ImageFailed="ImageBrush_ImageFailed" />
                    </Ellipse.Fill>
                </Ellipse>
                <TextBlock x:Name="headerText"  FontFamily="/Fonts/Yekan.otf#B Yekan" HorizontalAlignment="Left" Text="{Binding Title}" RelativePanel.RightOf="PoetImage" FontSize="30" VerticalAlignment="Bottom" TextWrapping="NoWrap" />
            </RelativePanel>
            <Grid HorizontalAlignment="Right" Width="400" x:Name="SearchBar" Margin="60,10,0,10">
                <TextBox x:Name="SearchTextBox" Margin="5,5,55,5" FlowDirection="RightToLeft" KeyUp="SearchTextBox_KeyUp" TextChanged="SearchTextBox_TextChanged" LostFocus="SearchTextBox_LostFocus" />
                <Button x:Name="SearchButton" Margin="5,5,5,5" HorizontalAlignment="Right"
                      Background="Transparent" Click="SearchButton_Click">
                    <FontIcon x:Name="SearchButtonIcon"  
                              FontFamily="Segoe MDL2 Assets"  
                         Foreground="{ThemeResource AppBarItemForegroundThemeBrush}"  
                         Glyph="&#xE094;" FontSize="28" />
                </Button>
            </Grid>
        </Grid>
        <Grid Grid.Row="1">
            <Grid x:Name="PhoneItemView">
                <ListView AutomationProperties.AutomationId="ItemGridView"
                          x:Name="listView"
			              AutomationProperties.Name="Items In Group"
			              TabIndex="1"
			              ItemsSource="{Binding Items}"
			              SelectionMode="None"
			              IsSwipeEnabled="false"
			              IsItemClickEnabled="True"
                          Padding="0,0,0,0"
			              Margin="0"
                          HorizontalContentAlignment="Center"
			              ItemClick="ItemView_ItemClick"
                          ItemTemplateSelector="{StaticResource ListViewDataTemplate}">
                    <ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem">
                            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                        </Style>
                    </ListView.ItemContainerStyle>
                </ListView>
            </Grid>
            <Grid x:Name="TabletItemView">
                <GridView AutomationProperties.AutomationId="ItemGridView"
                          x:Name="gridView"
			              AutomationProperties.Name="Items In Group"
			              TabIndex="1"
			              ItemsSource="{Binding Items}"
			              SelectionMode="None"
			              IsSwipeEnabled="false"
			              IsItemClickEnabled="True"
                          Padding="20,20,20,0"
			              Margin="0"
                          HorizontalContentAlignment="Center"
			              ItemClick="ItemView_ItemClick"
                          ItemTemplateSelector="{StaticResource GridViewDataTemplate}">
                </GridView>
            </Grid>
            <ProgressRing x:Name="LoadingRing" HorizontalAlignment="Center" VerticalAlignment="Center" Width="50" Height="50" IsActive="True" Visibility="Collapsed"/>
        </Grid>
    </Grid>

</Page>
